<template lang="pug">
  .page.page-3
    .side-bar.left(v-if="!deep")
      ModuleOutputValueRice
      ModuleOutputValueVegetables
      ModuleOutputValueRate
    .side-bar.left(v-else)
      ModuleIndustryFruit
      ModuleApply
      ModuleCherry
    .center
      ModuleMedicalData(v-if="!deep")
      img.back(v-else src="~@/assets/images/back.png" @click="handleBack")
    .side-bar.right(v-if="!deep")
      ModuleOutputValueFruit(@onMoreClick="handleMoreClick")
      ModuleOutputValueFollower
      ModuleCompany
    .side-bar.right(v-else)
      ModulePeach
      ModuleYangmei
      ModuleTopCompany
</template>

<script>


import ModuleOutputValueRate from './components/ModuleOutputValueRate';
import ModuleOutputValueOver from './components/ModuleOutputValueOver';
import ModuleAreaOver from './components/ModuleAreaOver';
import ModuleOutputValueFruit from './components/ModuleOutputValueFruit';
import ModuleOutputValueFollower from './components/ModuleOutputValueFollower';
import ModuleOutputValueRice from './components/ModuleOutputValueRice';
import ModuleOutputValueVegetables from './components/ModuleOutputValueVegetables';
import ModuleCompany from './components/ModuleCompany';
import ModuleIndustryFruit from './components/ModuleIndustryFruit';
import ModuleApply from './components/ModuleApply';
import ModuleCherry from './components/ModuleCherry';
import ModulePeach from './components/ModulePeach';
import ModuleYangmei from './components/ModuleYangmei';
import ModuleTopCompany from './components/ModuleTopCompany';
import ModuleMedicalData from './components/ModuleMedicalData';

import {mapMutations} from "vuex";
export default {
  name: "index",
  components: {

    ModuleMedicalData,

    ModuleOutputValueRate,
    ModuleOutputValueOver,
    ModuleAreaOver,

    ModuleOutputValueFruit,
    ModuleOutputValueRice,
    ModuleOutputValueVegetables,
    ModuleOutputValueFollower,
    ModuleCompany,

	ModuleIndustryFruit,//富民县水果产业概况
	ModuleApply,//苹果产业
	ModuleCherry,//樱桃产业
	ModulePeach,//冬桃产业
	ModuleYangmei,//杨梅产业
	ModuleTopCompany,//龙头企业
  },
  data() {
    return {
      deep: false,
    }
  },
  methods: {
    ...mapMutations({
      // 设置点位
      setMarkers: 'map/SET_MARKERS',
      // 清除点位
      clearMarkers: 'map/CLEAR_MARKERS',
      setNetworkError: 'network/SET_NETWORK_ERROR',
    }),
    handleMoreClick() {
      this.deep = true;
      this.renderMarkers();
    },
    handleBack() {
      this.deep = false;
      this.clearMarkers();
    },
    renderMarkers() {
      this.setMarkers([
        {
          lat: 25.314728862417956,
          lng: 102.38855293790493,
          label: '仓禾农业',
          name: '富民仑禾农业开发有限公司',
          desc: '市级龙头企业',
          product: '主营产品：苹果',
        },
        {
          lat: 25.2871073790158,
          lng: 102.42597579911035,
          label: '锐泽农业',
          name: '富民锐泽农业科技有限公司',
          desc: '省级龙头企业',
          product: '主营产品：全品种水果',
        },
        {
          lat: 25.319162241783166,
          lng: 102.51279639035147,
          label: '万鑫果业',
          name: '云南万鑫果业有限公司',
          desc: '市级龙头企业',
          product: '主营产品：猕猴桃',
        },
        {
          lat: 25.36865371485319,
          lng: 102.50993201638721,
          label: '富亚实业',
          name: '富民富亚实业有限责任公司',
          desc: '市级龙头企业',
          product: '主营产品：苹果等',
        },
        {
          lat: 25.320430909890942,
          lng: 102.5746963022766,
          label: '东山林果',
          name: '昆明东山林果科技开发有限公司',
          desc: '市级龙头企业',
          product: '主营产品：车厘子等水果',
        },
      ]);

      // 锐泽
      // height: 0
      // lat: 25.3171073790158
      // lng: 102.42597579911035

      // 万鑫
      // height: 0
      // lat: 25.349162241783166
      // lng: 102.51279639035147

      // 富亚
      // height: 0
      // lat: 25.39865371485319
      // lng: 102.50993201638721

      // 东山
      // height: 0
      // lat: 25.350430909890942
      // lng: 102.5746963022766
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.page-3{
  flex: 1;
  display: flex;
  .side-bar{
    width: rem(460);
    display: flex;
    flex-direction: column;
  }
  .center{
    flex: 1;
    position: relative;
    .back{
      position: absolute;
      top: rem(20);
      left: rem(40);
      cursor: pointer;
      pointer-events: auto;
      z-index: 9;
    }
  }
}
</style>
